<template>
  <div class="app-container">
    <div v-if="!dialogVisible">
      <el-alert
        v-if="result == 1"
        title="金库认证成功"
        type="success"
        effect="dark"
      >
      </el-alert>
      <el-alert
        v-if="result == 2"
        title="金库认证放弃"
        type="info"
        effect="dark"
      >
      </el-alert>
    </div>
    <div class="auditForm">
      <el-dialog
        title="金库认证"
        :show-close="false"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :close-on-click-modal="false"
        width="45%"
      >
        <el-form
          ref="auditForm"
          :model="auditForm"
          :rules="rules"
          label-width="110px"
        >
          <el-form-item label="授权方式:" prop="authorizeType">
            <el-select
              v-model="auditForm.authorizeType"
              placeholder="请选择授权方式"
            >
              <el-option
                v-for="item in methodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="协同操作人:" prop="approvalUserCode">
            <el-select
              v-model="auditForm.approvalUserCode"
              placeholder="请选择协同操作人"
            >
              <el-option
                v-for="item in persons"
                :key="item.userId"
                :label="item.userCode"
                :value="item.userCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="4A主账号密码:" prop="approvalUserCodePw">
            <common-pwd-input
              placeholder="请输入4A主账号密码"
              :maxlength="36"
              style="width: 100%"
              v-model="auditForm.approvalUserCodePw"
            ></common-pwd-input>
            <!-- <el-input v-model="auditForm.approvalReason" maxlength="8" placeholder="请输入审批人密码"></el-input> -->
          </el-form-item>
          <el-form-item label="申请理由:" prop="applyReasonType">
            <el-select
              v-model="auditForm.applyReasonType"
              placeholder="请选择申请理由"
            >
              <el-option
                v-for="item in reasonList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="授权工单:" prop="authorizeOrder">
            <el-input
              v-model="auditForm.authorizeOrder"
              maxlength="256"
              placeholder="请输入授权工单"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细理由:" prop="approvalUserCodeReason">
            <el-input
              type="textarea"
              v-model="auditForm.approvalUserCodeReason"
              maxlength="256"
              placeholder="请输入详细理由"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitaddForm('2')">放 弃</el-button>
          <!-- <el-button @click="handleClose">取 消</el-button> -->
          <el-button type="primary" @click="submitaddForm('1')"
            >认 证</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import {
  getList,
  updateStatus,
  selectLoginVoByApproveId,
} from "@/api/yybl/jinkulist";
import { mapActions, mapState } from "vuex";
import { setTokenEncrypt } from "@/utils/auth";
export default {
  components: {},
  mixins: [table],
  props: {},
  data() {
    return {
      columnConfigs,
      dialogVisible: true,
      auditForm: {
        approvalUserCode: "",
        approvalReason: "",
        approvalUserCodePw: "",
        authorizeType: "",
        applyReasonType: "",
        authorizeOrder: "",
      },
      rules: {
        approvalUserCode: [
          { required: true, message: "请选择审批人", trigger: "change" },
        ],
        approvalReason: [
          { required: true, message: "请输入审批理由", trigger: "blur" },
        ],
        approvalUserCodePw: [
          { required: true, message: "请输入审批人密码", trigger: "blur" },
        ],
        authorizeType: [
          { required: true, message: "请选择授权方式", trigger: "change" },
        ],
        applyReasonType: [
          { required: true, message: "请选择申请理由", trigger: "change" },
        ],
      },
      methodList: [
        {
          label: "现场授权",
          value: "1",
        },
        {
          label: "远程授权",
          value: "2",
        },
      ],
      reasonList: [
        {
          label: "客户投诉",
          value: "1",
        },
        {
          label: "系统集成",
          value: "2",
        },
        {
          label: "故障处理",
          value: "3",
        },
        {
          label: "业务受理",
          value: "4",
        },
        {
          label: "业务测试",
          value: "5",
        },
      ],
      curRow: {},
      token: "",
      id: "",
      deid:"",
      result: null,
    };
  },
  watch: {},
  computed: {
    ...mapState("common", ["persons"]),
  },
  methods: {
    ...mapActions("common", ["getPersondatas"]),
    handleSelectionChange() {},
    async init() {
      let params = {
        id: this.id,
      };
      try {
        const res = await selectLoginVoByApproveId(params);
        console.log(res);
        if (res && res.rescode == 200) {
          let data = res.data;
          setTokenEncrypt(data.token);
          this.deid=data.approvalId
          this.getPersondatas();
        }
      } catch (error) {}
    },
    handleClose() {
      // this.dialogVisible = false;
    },
    submitaddForm(approvalResult) {
      if (approvalResult == "2") {
        let params = {
          approvalResult,
          approvalId: this.deid,
        };
        updateStatus(params)
          .then((res) => {
            if (res.rescode == 200) {
              this.dialogVisible = false;
              window.opener = null;
              window.open("", "_self");
              window.close();
              this.result = 2;
              this.$message.success(res.msg);
              this.refresh();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$refs["auditForm"].validate((val) => {
          if (val) {
            const {
              approvalUserCode,
              approvalUserCodeReason,
              approvalUserCodePw,
              authorizeType,
              applyReasonType,
              authorizeOrder,
            } = this.auditForm;
            let params = {
              approvalId: this.deid,
              approvalUserCode,
              approvalUserCodeReason,
              approvalUserCodePw,
              authorizeType,
              applyReasonType,
              authorizeOrder,
              approvalResult,
              token: this.token,
            };
            updateStatus(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible = false;
                  window.opener = null;
                  window.open("", "_self");
                  window.close();
                  this.result = 1;
                  this.$message.success(res.msg);
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            console.log("校验失败");
          }
        });
      }
    },
    rejectHandle(row) {
      this.$confirm("此操作将审批放弃该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          approvalId: row.approvalId,
          approvalResult: 2,
        };
        updateStatus(params)
          .then((res) => {
            if (res.rescode == 200) {
              this.$message.success(res.msg);
              this.refresh();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    updateStatusDialog(val, row) {
      console.log(val, row);
      this.curRow = row;
      this.auditForm = {
        approvalUserCode: "",
        approvalReason: "",
        approvalUserCodePw: "",
        authorizeType: "",
        applyReasonType: "",
        authorizeOrder: "",
      };
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs?.auditForm?.clearValidate();
      });
      // this.$refs['auditForm'] && this.$refs['auditForm'].clearValidate()
    },
    refresh() {
      this.getlists(getList, {});
    },
    updateStatus(row, status) {
      const msg =
        status == "1"
          ? "此操作将审批通过该数据, 是否继续?"
          : "此操作将审批驳回该数据, 是否继续?";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          approvalId: row.approvalId,
          token: row.token,
          approvalResult: status,
          notifyUrl: row.notifyUrl,
        };
        updateStatus(params)
          .then((res) => {
            console.log(res);
            if (res.rescode == "200") {
              this.$message.success(res.msg);
              this.refresh();
            } else this.$message.error(res.msg);
          })
          .catch((err) => {
            console.log(error);
          });
      });
    },
  },
  created() {
    // this.refresh();
    // 利用正则表达式
    let url = window.location.href;
    // // 返回参数对象
    function queryURLParams(url) {
      let pattern = /(\w+)=([^;/?:@&=+$,#]+)/gi; //定义正则表达式
      let parames = {}; // 定义参数对象
      url.replace(pattern, ($, $1, $2) => {
        parames[$1] = $2;
      });
      return parames;
    }
    this.token = queryURLParams(url).token;
    this.id = queryURLParams(url).id;
    this.id = decodeURIComponent(this.id);
    // console.log(decodeURIComponent(this.id),this.id);
    this.init();
    // console.log(queryURLParams(url));
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-button {
  .el-icon-circle-check + span {
    margin-left: 0px;
  }

  .el-icon-circle-close + span {
    margin-left: 0px;
  }
}

::v-deep .el-dialog {
  min-width: 500px;
  max-width: 568px;

  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
</style>
